<template>
  <div>
    782347
    <el-table
      :data="data"
      border
      @header-contextmenu="headerContextMenu"
      ref="table"
    >
      <slot ref="slot" ></slot>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'commonTable',
    props: {
      data: Array,
      selectionChange: {
        type: Function,
        default: function() {
          return function() {}
        }
      },
      sortChange: {
        type: Function,
        default: function() {
          return function() {}
        }
      },
      border: Boolean
    },
    data() {
      return {
        checkedColumns: [],
        menuStyleObject: {}
      }
    },
    methods: {
      /*
      *  表头右键触发
      * */
      headerContextMenu(info, $event) {
        this.$refs.table.nb
        console.log(this.$refs.slot, this.$refs.table);
        $event.stopPropagation();
        $event.preventDefault();
        this.headerCtrlVisible = true
        document.addEventListener('click', this.closeHeaderCtrlMenu) // 绑定
        this.$nextTick(() => {
          // const menuHeight = this.$refs.headerCtrlMenu.offsetHeight
          this.menuStyleObject = {
            left: event.clientX + 2 + 'px',
            top: event.clientY + 5 + 'px'
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
